<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{ padding: 0; margin: 0;}
        ul,li{list-style-type: none;}
        a{text-decoration: none;}
        .cont{ width: 100vw; height: 100vh; background-color: #333; position: relative;}
        .cont .flag-slow{ width: 50px; height: 50px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; animation: yundong 1s  infinite linear alternate; transition: all 1s;}
        @keyframes yundong{
            0%{
                top: 0;
            }
            100%{
                top: calc(100% - 50px);
            }
        }
    </style>
</head>
<body>
    <div class="cont">
         <div class="flag-slow">a</div>
         <div class="flag-slow">b</div>
         <div class="flag-slow">c</div>
         <div class="flag-slow">d</div>
         <div class="flag-slow">e</div>
         <div class="flag-slow">f</div>
         <div class="flag-slow">g</div>
         <div class="flag-slow">h</div>
         <div class="flag-slow">i</div>
         <div class="flag-slow">j</div>
         <div class="flag-slow">k</div>
         <div class="flag-slow">l</div>
         <div class="flag-slow">m</div>
         <div class="flag-slow">n</div>
         <div class="flag-slow">o</div>
         <div class="flag-slow">p</div>
         <div class="flag-slow">q</div>
         <div class="flag-slow">r</div>
         <div class="flag-slow">s</div>
         <div class="flag-slow">t</div>
         <div class="flag-slow">u</div>
         <div class="flag-slow">v</div>
         <div class="flag-slow">w</div>
         <div class="flag-slow">x</div>
         <div class="flag-slow">y</div>
         <div class="flag-slow">z</div>
    </div>
    <script>
        let flags = document.querySelectorAll(".flag-slow");
        let cont = document.querySelector(".cont");
        for(let i = 0; i < flags.length; i++){
            let leftwidth = Math.random() * window.innerWidth +50;
            let topwidth = Math.random() * window.innerHeight -50;
            let sleeptime = Math.random() * 4 + 1;
            flags[i].style.position = "absolute";
            flags[i].style.left = leftwidth + "px";
            flags[i].style.top = 0 + "px";
            flags[i].style.animationDuration = sleeptime + "s";
            flags[i].style.animationDelay = i * 0.1 + "s";
        }
    </script>
</body>
</html>